<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 150px;
      height: 150px;
      background-color: #6ff;
      position: absolute;
      left: 100px;
      top: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <script>
    //方法一

    // var obj = {
    //   target: document.getElementsByClassName("box")[0],
    //   dragStart: function () {
    //     var _this = this;
    //     console.log(_this);
    //     console.log(this);
    //     this.target.onmousedown = function (e) {
    //       var e = e || window.event;
    //       var posX = e.offsetX;
    //       var posY = e.offsetY;
    //       console.log(posX, posY);

    //       _this.posX = posX;
    //       _this.posY = posY;
    //       console.log(_this);

    //       _this.dragMove();
    //       _this.dragEnd();

    //     }
    //   },
    //   dragMove: function () {
    //     var _this = this;
    //     document.onmousemove = function (e) {
    //       var e = e || window.event;
    //       var x = e.pageX - _this.posX;
    //       var y = e.pageY - _this.posY;
    //       console.log(_this);
    //       _this.target.style.left = x + "px";
    //       _this.target.style.top = y + "px";

    //     }
    //   },

    //   dragEnd: function () {
    //     document.onmouseup = function () {
    //       document.onmousemove = null;
    //     }
    //   }


    // }

    //方法二

    // var boxList = document.getElementsByClassName("box");
    // for (let i = 0; i < boxList.length; i++) {
    //   let box = boxList[i];
    //   var result = dragEle(box);
    //   result.init();
    // }

    // function DragEle(ele) {
    //   var obj = {
    //     target: ele,
    //     init: function () {
    //       this.randColor();
    //       this.dragStart();
    //     },
    //     dragStart: function () {

    //       this.target.onmousedown = (e) => {
    //         var e = e || window.event;
    //         var posX = e.offsetX;
    //         var posY = e.offsetY;
    //         console.log(posX, posY);

    //         this.posX = posX;
    //         this.posY = posY;
    //         console.log(this);

    //         this.dragMove();
    //         this.dragEnd();

    //       }
    //     },
    //     dragMove: function () {

    //       document.onmousemove = (e) => {
    //         var e = e || window.event;
    //         var x = e.pageX - this.posX;
    //         var y = e.pageY - this.posY;

    //         this.target.style.left = x + "px";
    //         this.target.style.top = y + "px";

    //       }
    //     },

    //     dragEnd: function () {
    //       document.onmouseup = function () {
    //         document.onmousemove = null;
    //       }
    //     },
    //     randColor: function () {
    //       var str = "0123456789abcdef";
    //       var colorStr = "#";
    //       for (var i = 0; i < 6; i++) {
    //         var index = Math.floor(Math.random() * str.length);
    //         var char = str.charAt(index);
    //         colorStr += char;
    //       }
    //       this.target.style.backgroundColor = colorStr;
    //     }


    //   }
    //   return obj;
    // }


    function DragEle(ele) {
      this.target = ele;
    }

    DragEle.prototype.init = function () {
      this.randColor();
      this.dragStart();
    }

    DragEle.prototype.dragStart = function () {
      this.target.onmousedown = (e) => {
        var e = e || window.event;
        var posX = e.offsetX;
        var posY = e.offsetY;
        console.log(posX, posY);

        this.posX = posX;
        this.posY = posY;
        console.log(this);

        this.dragMove();
        this.dragEnd();

      }
    }

    DragEle.prototype.dragMove = function () {
      document.onmousemove = (e) => {
        var e = e || window.event;
        var x = e.pageX - this.posX;
        var y = e.pageY - this.posY;

        this.target.style.left = x + "px";
        this.target.style.top = y + "px";

      }
    }

    DragEle.prototype.dragEnd = function () {
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    }
    DragEle.prototype.randColor = function () {
      var str = "0123456789abcdef";
      var colorStr = "#";
      for (var i = 0; i < 6; i++) {
        var index = Math.floor(Math.random() * str.length)
        var char = str.charAt(index);
        colorStr += char;

      }
      this.target.style.backgroundColor = colorStr;
    }


    console.dir(DragEle);
    var result = new DragEle();
    console.dir(result);

    var boxList = document.getElementsByClassName("box");
    for (let i = 0; i < boxList.length; i++) {
      let box = boxList[i];
      var result = new DragEle(box);
      console.log(result);
      result.init();
    }

  </script>

</html>